<template>
    <div class="cont">
      <p class="title">table组件例子</p>
      <Table border :columns="columns1" :data="data1"></Table>
      <table_filter :options="options" @cancelFilterFun="cancelFilterFun" @okFilterFun="okFilterFun"></table_filter>
    </div>
</template>
<script>
  import table_filter from '@/components/table_filter'
  export default {
      data() {
          return {
            options: {
              type: '',   // form类型
              placeholder: '',  // 提示语
              left: -1000,    // 弹框fixed => left
              iconLeft: 0,  // 弹框icon => left
              top: -1000,    // 弹框fixed => top
              width: 218,   // 弹框fixed => top
              setTimeout: null,    // 鼠标离开三角形 200毫秒 关闭弹框
              orderNumber: '', // 订单编号 字段
              customerName: '',  // 客户姓名 字段
              daterange: '',   // 年月日
              datetimerange: '',  // 年月日时分秒
              multipleCheckbox: [],  // Checkbox 字段
              checkboxList: [{name: '香蕉', val: '11'}, {name: '苹果', val: '22'}], // Checkbox数据
              selectVal: [],  // Select 多项 字段
              selectList: [{name: '香蕉', val: '11'}, {name: '苹果', val: '22'}, {name: '苹果', val: '22'}, {name: '苹果', val: '22'}, {name: '苹果', val: '22'}, {name: '苹果', val: '22'}, {name: '苹果', val: '22'}], // select数据
              autoCompleteVal: '', // autoComplete 字段
              operatingVal: [],   // 操作 字段
            tableTitleList: [{name: '订单编号', val: '11', selected: false}, {name: '输入范围', val: '22', selected: false}, {name: '订单编号', val: '11', selected: false}, {name: '输入范围', val: '22', selected: false}, {name: '订单编号', val: '11', selected: false}, {name: '输入范围', val: '22', selected: false}]     // 操作 数据
            },
            columns1: [
              {
                title: 'Name',
                key: 'name',
                renderHeader: (h, params) => {
                  return h('div',[
                    h('span', {}, '订单编号'),
                    h('Icon', {
                      props: {
                        type: 'ios-arrow-down',
                        size: '16'
                      },
                      style: {
                        marginLeft: '5px'
                      },
                      nativeOn: {
                        'mouseover': (event) => {
                          event.stopPropagation();
                          this.thMouseoverFun(event, 'input-orderNumber', '请输入订单编号', 218);
                        },
                        'mouseleave': (event) => {
                          event.stopPropagation();
                          this.thMouseoutFun();
                        }
                      }
                    })
                  ])
                }
              },
              {
                title: '输入范围',
                key: 'age',
                renderHeader: (h, params) => {
                  return h('div',[
                    h('span', {}, '客户姓名'),
                    h('Icon', {
                      props: {
                        type: 'ios-arrow-down',
                        size: '16'
                      },
                      style: {
                        marginLeft: '5px'
                      },
                      nativeOn: {
                        'mouseover': (event) => {
                          event.stopPropagation();
                          this.thMouseoverFun(event, 'input-customerName', '请输入客户姓名', 218);
                        },
                        'mouseleave': (event) => {
                          event.stopPropagation();
                          this.thMouseoutFun();
                        }
                      }
                    })
                  ])
                }
              },
              {
                title: 'Address',
                key: 'address',
                renderHeader: (h, params) => {
                  return h('div',[
                    h('span', {}, '时间-年月日'),
                    h('Icon', {
                      props: {
                        type: 'ios-arrow-down',
                        size: '16'
                      },
                      style: {
                        marginLeft: '5px'
                      },
                      nativeOn: {
                        'mouseover': (event) => {
                          event.stopPropagation();
                          //  datePicker-daterange-daterange   第三字符串  是type类型
                          this.thMouseoverFun(event, 'datePicker-daterange-daterange', '请选择时间-年月日', 240);
                        },
                        'mouseleave': (event) => {
                          event.stopPropagation();
                          this.thMouseoutFun();
                        }
                      }
                    })
                  ])
                }
              },
              {
                title: 'Address',
                key: 'address',
                renderHeader: (h, params) => {
                  return h('div',[
                    h('span', {}, '时间-年月日时分秒'),
                    h('Icon', {
                      props: {
                        type: 'ios-arrow-down',
                        size: '16'
                      },
                      style: {
                        marginLeft: '5px'
                      },
                      nativeOn: {
                        'mouseover': (event) => {
                          event.stopPropagation();
                          this.thMouseoverFun(event, 'datePicker-datetimerange-datetimerange', '请选择时间-年月日时分秒', 360);
                        },
                        'mouseleave': (event) => {
                          event.stopPropagation();
                          this.thMouseoutFun();
                        }
                      }
                    })
                  ])
                }
              },
              {
                title: 'Address',
                key: 'address',
                renderHeader: (h, params) => {
                  return h('div',[
                    h('span', {}, '多项Checkbox'),
                    h('Icon', {
                      props: {
                        type: 'ios-arrow-down',
                        size: '16'
                      },
                      style: {
                        marginLeft: '5px'
                      },
                      nativeOn: {
                        'mouseover': (event) => {
                          event.stopPropagation();
                          this.thMouseoverFun(event, 'Checkbox-multipleCheckbox-checkboxList', '多项Checkbox', 160);
                        },
                        'mouseleave': (event) => {
                          event.stopPropagation();
                          this.thMouseoutFun();
                        }
                      }
                    })
                  ])
                }
              },
              {
                title: 'Address',
                key: 'address',
                renderHeader: (h, params) => {
                  return h('div',[
                    h('span', {}, 'Select选择器'),
                    h('Icon', {
                      props: {
                        type: 'ios-arrow-down',
                        size: '16'
                      },
                      style: {
                        marginLeft: '5px'
                      },
                      nativeOn: {
                        'mouseover': (event) => {
                          event.stopPropagation();
                          // 如果多项 Select-selectVal-selectList-multiple    第四个字段传 multiple
                          this.thMouseoverFun(event, 'Select-selectVal-selectList', 'Select 选择器', 200);
                        },
                        'mouseleave': (event) => {
                          event.stopPropagation();
                          this.thMouseoutFun();
                        }
                      }
                    })
                  ])
                }
              },
              {
	              title: 'autoComplete',
	              key: 'name7',
	              minWidth: 120,
	              renderHeader: (h, params) => {
	                return h('div',[
	                  h('span', {}, 'autoComplete'),
	                  h('Icon', {
	                    props: {
	                      type: 'ios-arrow-down',
	                      size: '16'
	                    },
	                    style: {
	                      marginLeft: '5px'
	                    },
	                    nativeOn: {
	                      'mouseover': (event) => {
	                        event.stopPropagation();
	                        this.thMouseoverFun(event, 'AutoComplete-autoCompleteVal', '请选择autoComplete', 200);
	                      },
	                      'mouseleave': (event) => {
	                        event.stopPropagation();
	                        this.thMouseoutFun();
	                      }
	                    }
	                  })
	                ])
	              }
	            },
              {
                title: '操作',
                key: 'address',
                fixed: 'right',
                width: 120,
                align: 'center',
                render: (h, params) => {
                  return h('div', [
                    h('a', {
                      on: {
                        click: () => {
                          this.viewClick(params.row);
                        }
                      }
                    }, '查看详情')
                  ]);
                },
                renderHeader: (h, params) => {
                  return h('div',[
                    h('span', {}, '操作'),
                    h('Icon', {
                      props: {
                        type: 'md-settings',
                        size: '16'
                      },
                      style: {
                        marginLeft: '5px'
                      },
                      nativeOn: {
                        'mouseover': (event) => {
                          event.stopPropagation();
                          this.thMouseoverFun(event, 'tableTitle-operatingVal-tableTitleList', '', 300);
                        },
                        'mouseleave': (event) => {
                          event.stopPropagation();
                          this.thMouseoutFun();
                        }
                      }
                    })
                  ])
                }
              }
            ],
            data1: [
              {
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park',
                date: '2016-10-03'
              },
              {
                name: 'Jim Green',
                age: 24,
                address: 'London No. 1 Lake Park',
                date: '2016-10-01'
              },
              {
                name: 'Joe Black',
                age: 30,
                address: 'Sydney No. 1 Lake Park',
                date: '2016-10-02'
              }
            ]
          }
      },
      components: {
        table_filter
      },
      methods: {
        // 鼠标移到三角形事件
        thMouseoverFun(event, type, placeholder, width) {
          this.options.type = type
        this.options.placeholder = placeholder
        this.options.left = event.currentTarget.getBoundingClientRect().left - (width/2 - 5) <= 200 ? 200 : (event.currentTarget.getBoundingClientRect().left - (width/2 - 5) + width) > document.documentElement.clientWidth ? (document.documentElement.clientWidth - width) : event.currentTarget.getBoundingClientRect().left - (width/2 - 5)
        this.options.iconLeft = event.currentTarget.getBoundingClientRect().left
        this.options.top = event.currentTarget.getBoundingClientRect().top + 24
        this.options.width = width
        },
        // 鼠标离开三角形事件
        thMouseoutFun() {
          this.options.setTimeout = setTimeout(() => {
            this.options.left = -1000
            this.options.top = -1000
          },100)
        },
        // table from 取消事件
        cancelFilterFun(options) {
          console.log('cancelFilterFun', options)
        },
        // table from 确定事件
        okFilterFun(options) {
          console.log('okFilterFun', options)
        }
      },
      watch: {},
      computed: {

      },
      created() {

      },
      mounted() {

      }
  }
</script>
<style lang="scss">
  .cont{
    padding: 14px;
  }
  .title{
    font-size: 15px;
    font-weight: 600;
    text-align: center;
  }
</style>
